<template>
  <div class="homePage-content active-list-page">
    <div class="container">
      <!-- 资源中心区域 -->
      <section class="resource-section">
        <h2 class="resource-section__title">
          市场洞察
          <span class="subtitle">| 全球商机趋势与品牌战略</span>
        </h2>
        <div class="resource-container">
          <!-- 左侧焦点图区 -->
          <div class="resource-spotlight">
            <div class="spotlight-slider">
              <div v-for="(slide, index) in spotlightSlides" :key="index" class="spotlight-slide"
                :class="{ active: currentSlide === index }">
                <img :src="slide.coverImageUrl" :alt="slide.title" @click="handleTopListClick(slide)">
                <div class="spotlight-caption">{{ slide.title }}</div>
              </div>
            </div>
            <div class="spotlight-controls">
              <div v-for="(_, index) in spotlightSlides" :key="index" class="spotlight-dot"
                :class="{ active: currentSlide === index }" @click="currentSlide = index"></div>
            </div>
          </div>

          <!-- 右侧四个分类 -->
          <div class="resource-categories">
            <div class="resource-category-item" v-for="(item, index) in topColumns" :key="index">
              <template v-if="item.columnName">
                <h3 class="resource-category-item__title flex justify-between items-center cursor-pointer">
                  <span>
                    {{ item.columnName }}
                  </span>
                  <div class="resource-category-item__link" @click="handleMoreClick(item)"
                    style="color: #1890ff; font-weight: 500;">更多 &gt;</div>
                </h3>
                <ul class="resource-category-item__list">
                  <template v-if="item.articles && item.articles.length > 0">
                    <li v-for="(article, articleIndex) in item.articles" :key="articleIndex"
                      class="resource-category-item__list-item">
                      <div class="resource-category-item__link" @click="handleArticleClick(article)">{{ article.title }}
                      </div>
                    </li>
                  </template>
                  <template v-else>
                    <li class="resource-category-item__list-item">
                      <span class="resource-category-item__link">暂无文章</span>
                    </li>
                  </template>
                </ul>
              </template>
            </div>
            <div class="resource-category-item">
              <h3 class="resource-category-item__title flex justify-between items-center cursor-pointer">
                <span>
                  品牌榜单
                </span>
              </h3>
              <div class="category-text">
                专业出海智库，助力企业全球布局。提供精准市场洞察、本土化策略以及落地支持，让您的品牌无缝对接国际市场。
              </div>
              <el-button type="primary" @click="handleGoLink('/channel/brands')">
                探索榜单
              </el-button>
            </div>
            <div class="resource-category-item">
              <h3 class="resource-category-item__title flex justify-between items-center cursor-pointer">
                <span>
                  出海方法论
                </span>
              </h3>
              <div class="category-text">
                专业的出海解决方案，助力企业快速拓展全球市场。我们提供完整的出海战略规划、市场分析、本地化运营等服务，让您的业务轻松走向世界。
              </div>
              <el-button type="primary" @click="handleGoLink('/channel/methodology')">
                探索方法论
              </el-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 内容区域 -->
      <div class="has-menu-box">
        <div class="left-type">
          <el-skeleton :loading="businessCategoriesLoading" animated :count="20">
            <template #template>
              <div class="left-type-info">
                <el-skeleton-item variant="text" class="type-text"></el-skeleton-item>
              </div>

            </template>
            <template #default>
              <div class="left-type-info" v-for="(item, index) in businessCategories" :key="index" :class="{
                'active': item.id === businessCategoriesActive,
                'hover': item.id === hoverBusinessId && item.id !== businessCategoriesActive
              }" @click="businessCategoriesActiveChange(item.id, index)">
                <div class="type-text">{{ item.name }}</div>
              </div>
            </template>
          </el-skeleton>
        </div>
        <div class="right-content">
          <!-- 两列布局结构 -->
          <div class="two-column-layout">
            <!-- 右侧：知名企业导航 + 出海专区内容 -->
            <div class="right-column">
              <!-- 知名企业导航 -->
              <section class="community-section">
                <h2 class="community-section__title">
                  出海链主
                  <span class="subtitle">| 中国领先品牌全球化布局</span>
                </h2>
                <div class="company-grid">
                  <div v-for="(company, index) in companies" :key="index"
                    @click="getChainEnterpriseDetail(company.enterpriseId)" class="company-logo-item">
                    <div class="company-tooltip">{{ company.enterpriseName }}</div>
                    <div class="company-logo-wrapper" :data-fallback="company.enterpriseName">
                      <img :src="company.logoUrl" :alt="company.enterpriseName" @error="handleImageError">
                    </div>
                  </div>
                </div>
              </section>

            </div>
          </div>
          <div class="four-box">
            <div class="to-sea-box">
              <div class="right-box" id="inner">
                <el-skeleton :loading="businessCategoriesLoading" animated :count="20">
                  <template #template>
                    <div class="tab-box">
                      <div class="tab-title"></div>
                      <el-skeleton-item class="check-ul" variant="h1" />

                      <div class="tool-content">
                        <div class="tool-box" v-for="i in 6" :key="i">
                          <div class="tool-info">
                            <div class="tool-icon">
                              <el-skeleton-item style="width: 40px;height: 40px;" variant="circle" />
                            </div>
                            <div class="tool-text-box">
                              <el-skeleton-item class="title" variant="h1" />
                              <el-skeleton-item class="text" variant="h1" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template #default>
                    <div class="tab-box" v-for="(item, businessIndex) in businessCategories" :key="businessIndex"
                      :id="'businessCategories' + item.id" @mouseenter="hoverBusinessId = item.id"
                      @mouseleave="hoverBusinessId = null">
                      <div class="tab-title">{{ item.name }}</div>
                      <ul class="check-ul">
                        <li @click.stop="toolCategoriesActiveChange(itemCategories.id, businessIndex, indexCategories)"
                          v-for="(itemCategories, indexCategories) in item.toolCategories"
                          :class="{ 'active': toolCategoriesActive === itemCategories.id }"
                          :key="indexCategories">
                          <span>{{ itemCategories.name }}</span>
                        </li>
                      </ul>
                      <div class="tool-content">
                        <div class="tool-box" @click.stop="addRecentlyUseFun(itemTool)"
                          v-for="(itemTool, indexTool) in item?.tools" :key="indexTool">
                          <div class="tool-info">
                            <div class="tool-icon">
                              <img v-if="itemTool.logoUrl" :src="itemTool.logoUrl" alt="">
                            </div>
                            <div class="tool-text-box">
                              <div class="title">
                                {{ itemTool.name }}
                              </div>
                              <div class="text">
                                <el-tooltip class="box-item" popper-class="box-item" style="width: 200px" effect="dark"
                                  placement="bottom">
                                  <template #content>
                                    <div>{{ itemTool.name }}</div>
                                    <div>{{ itemTool.description }}</div>
                                  </template>
                                  <div class="popover-box">
                                    {{ itemTool.description }}
                                  </div>
                                </el-tooltip>
                              </div>
                            </div>
                          </div>
                          <!--                  <div class="tool-btn-box">-->
                          <!--                    <div class="btn-item">-->
                          <!--                      <a :href="item.linkUrl">官网</a>-->
                          <!--                    </div>-->
                          <!--                    <div class="btn-item">本土</div>-->
                          <!--                    <div class="btn-item">跨境</div>-->
                          <!--                  </div>-->
                        </div>
                      </div>
                    </div>
                  </template>
                </el-skeleton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { getOutSeaTools, getBusinessCategories } from '@/api/channel'
import { getChainEnterprises, getTopColumns, getScrollingArticles } from '@/api/channel'

import { useSeoMeta } from '#app'
useSeoMeta({
  title: '中国品牌出海导航站-中国出海品牌案例库、榜单与方法论-出海链主动态|贸行四海',
  description: '贸行四海出海品牌频道，致力于展示各大细分赛道中国全球化代表性品牌，打造出海品牌案例库与方法论。重点介绍华为、小米、阿里巴巴、抖音、传音、OPPO、腾讯、蜜雪冰城、名创优品、Shein、宁德时代、比亚迪、安克创新、大疆、安踏、复星、迈瑞医疗、网易、快手、TCL、海尔、海信、联想、美的、京东等出海链主的出海大事记与动态。',
  keywords: '3C电子、家电家居、出行物流、妆容服饰、户外运动、母婴教育、食品医疗、宠物',
  // ogTitle: '社交媒体分享标题',
  // ogDescription: '社交媒体分享描述',
  // ogImage: '社交媒体分享图片URL',
  // twitterCard: 'summary_large_image'
})


const router = useRouter();

// 增加最近使用
const addRecentlyUseFun = (data) => {
  window.open(data.linkUrl, "_blank");
}


const businessCategories = ref([]); // 业务分类列表
const businessCategoriesActive = ref(null)
const toolCategoriesActive = ref([]);// 工具分类列表
const businessCategoriesLoading = ref(true);

// 出海专区
const getHomeOutSeaFun = () => {
  return getBusinessCategories().then(res => {
    businessCategories.value = res.data;
    businessCategoriesLoading.value = false;
    toolCategoriesActive.value = businessCategories.value[0]?.toolCategories?.[0]?.id;
  })
}

const getHomeOutSeaFunSSR = async () => {
  const getHomeOutSeaBusinessCategoriesData = await getApi('/oversea-channel/h/business-categories');
  businessCategories.value = getHomeOutSeaBusinessCategoriesData.data;
  businessCategoriesLoading.value = false;
  toolCategoriesActive.value = businessCategories.value[0]?.toolCategories?.[0]?.id;
}

getHomeOutSeaFunSSR();

// 出海专区业务分类切换
const businessCategoriesActiveChange = (id, index) => {
  businessCategoriesActive.value = id;
  // 切换到新的业务分类时，自动高亮其第一个子分类
  if (businessCategories.value[index].toolCategories.length > 0) {
    toolCategoriesActive.value = businessCategories.value[index].toolCategories[0].id;
  }

  // 使用锚点跳转
  const target = document.getElementById('businessCategories' + id);
  if (target) {
    target.scrollIntoView({ behavior: 'smooth' });
  }
}

// 出海专区工具分类切换
const toolCategoriesActiveChange = (toolId, businessIndex) => {
  // 更新当前业务分类下的激活子分类
  toolCategoriesActive.value = toolId;
  // a 业务分类 b 工具类型
  getOutSeaTools({ a: businessCategories.value[businessIndex].id, b: toolId }).then(res => {
    businessCategories.value[businessIndex].tools = res.data.tools
  })
}

const init = async () => {
  getHomeOutSeaFun();
  getChainEnterprisesList();
}

// 焦点图数据
const spotlightSlides = ref([])

// 企业数据
const companies = ref([])

// 获取链主企业列表
const getChainEnterprisesList = async () => {
  const res = await getChainEnterprises()
  companies.value = res.data;
  console.log(res)
}

const getChainEnterprisesListSSR = async () => {
  const res = await getApi('/oversea-channel/h/chain-enterprises');
  companies.value = res.data;
  console.log(res)
}

getChainEnterprisesListSSR();

// 获取链主企业详情
const getChainEnterpriseDetail = async (enterpriseId) => {
  // 跳转至链主企业详情页 打开新页面
  window.open(`/channel/linkBrands?id=${enterpriseId}`, '_blank')
}

// 状态管理
const currentSlide = ref(0)

// 自动轮播
let slideInterval;

onMounted(() => {
  // init();
  // 启动自动轮播
  slideInterval = setInterval(() => {
    currentSlide.value = (currentSlide.value + 1) % spotlightSlides.value.length
  }, 5000)
  getTopColumnsList();
  getScrollingArticlesFun();
})


const getScrollingArticlesFun = async () => {
  const res = await getScrollingArticles()
  spotlightSlides.value = res.data;
}


const topColumns = ref([])

const getTopColumnsList = async () => {
  topColumns.value = [];
  const res = await getTopColumns({limit:4})
  topColumns.value = res.data;
  if (topColumns.value.length < 2) {
    topColumns.value.push({});
  }
}

const handleMoreClick = (item) => {
  console.log(item)
  // 新开详情页
  window.open(`/channel/column?id=${item.columnId}`, '_blank')
}

const handleArticleClick = (item) => {
  console.log(item)
  // 新开专栏详情页
  window.open(`/channel/columnInformationDetails?id=${item.articleId}&columnId=${item.columnId}`, '_blank')
}

// 跳转至指定链接
const handleGoLink = (link) => {
  window.open(link, '_blank')
}

const handleTopListClick = (item) => {
  console.log(item)
  // 新开详情页
  window.open(`/information/informationDetails?id=${item.articleId}`, '_blank')
}

onUnmounted(() => {
  // 清除定时器
  if (slideInterval) {
    clearInterval(slideInterval)
  }
})

// 图片加载错误处理
const handleImageError = (event) => {
  event.target.classList.add('error')
}
</script>

<style scoped>
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #f5f7fa;
  padding: 30px 0;
  color: #333;
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Card Common Styles */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Section Common Styles */
.section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
}

/* Resource Section Styles */
.resource-section {
  background: #fff;
  padding: 15px;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.resource-section__title {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
  position: relative;
}

.resource-section__title:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 3px;
  background: #1890ff;
  border-radius: 3px;
}

.resource-container {
  display: flex;
  gap: 20px;
  width: 100%;
  @media screen and (max-width: 991px) {
    flex-wrap: wrap;
  }
}

.resource-spotlight {
  flex: 3;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  height: 360px;
  max-width: 60%;
  @media screen and (max-width: 991px) {
    max-width: 100%;
    width: 100%;
    flex: auto;
    flex-shrink: 0;
  }
}

.spotlight-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.spotlight-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.spotlight-slide.active {
  opacity: 1;
}

.spotlight-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spotlight-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.spotlight-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 12px;
  z-index: 5;
}

.spotlight-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.spotlight-dot.active {
  background: #fff;
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(255, 255, 255, 1);
}

.resource-categories {
  flex: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  /* max-width: 40%; */
}

.resource-category-item {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  flex: 1;
  /* min-width: 200px; */
  display: flex;
  flex-direction: column;
  height: 170px;
  overflow: hidden;
}

.resource-category-item .category-text {
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
  @media screen and (max-width: 991px) {
    font-size: 10px;
  }
}

.resource-category-item:hover {
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
  border-color: #e6e6e6;
}

.resource-category-item__title {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e8e8e8;
  position: relative;
}

.resource-category-item__title:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 30px;
  height: 2px;
  background: #1890ff;
  border-radius: 2px;
}

.resource-category-item__list {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.resource-category-item__list-item {
  margin-bottom: 8px;
  position: relative;
  padding-left: 16px;
  cursor: pointer;
}

.resource-category-item__list-item:before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: #1890ff;
  border-radius: 50%;
}

.resource-category-item__link {
  color: #555;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}

.resource-category-item__link:hover {
  color: #1890ff;
  padding-left: 2px;
  font-weight: 500;
}

/* Two Column Layout */
.two-column-layout {
  display: flex;
  gap: 24px;
  margin-bottom: 10px;
  width: 100%;
}

.right-column {
  flex: 1;
}

/* Column Layer */
.column-layer {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.layer-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
  position: relative;
}

.layer-title:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: #1890ff;
  border-radius: 2px;
}

.column-categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.column-btn {
  padding: 8px 16px;
  border: none;
  background: #fff;
  border-radius: 6px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  position: relative;
  border: 1px solid #eaeaea;
  text-align: left;
}

.column-btn:hover {
  background: #f0f2f5;
  border-color: #d0d0d0;
}

.column-btn.active {
  background: #e6f7ff;
  color: #1890ff;
  border-color: #91d5ff;
  font-weight: 500;
}

.column-btn::after {
  content: attr(data-count);
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  color: #999;
  background: #f5f5f5;
  padding: 1px 5px;
  border-radius: 10px;
  line-height: 1.2;
}

.column-btn.active::after {
  background: #1890ff;
  color: #fff;
}

/* Community Section */
.community-section {
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
  margin-top: 10px;
}

.community-section__title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8e8e8;
  position: relative;
}

.community-section__title:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: #1890ff;
  border-radius: 2px;
}

.company-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
}

.company-logo-item {
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeInLogo 0.5s ease-out forwards;
  position: relative;
  cursor: pointer;
}

.company-logo-wrapper {
  aspect-ratio: 1;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 8%;
  position: relative;
  overflow: hidden;
  border: 1px solid #eaeaea;
}

.company-logo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.3s ease;
}

.company-logo-item:hover .company-logo-wrapper {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
  border-color: #d0d0d0;
}

.company-logo-item:hover .company-logo-wrapper img {
  transform: scale(1.05);
  filter: brightness(1.05);
}

.company-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  margin-bottom: 3px;
  z-index: 10;
}

.company-logo-item:hover .company-tooltip {
  visibility: visible;
  opacity: 1;
}

/* Tool Layer */
.tool-layer {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.tool-tabs {
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.tool-tabs::-webkit-scrollbar {
  height: 4px;
}

.tool-tabs::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.tool-tabs::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.tool-tab {
  padding: 6px 12px;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.tool-tab:hover {
  background: #f0f2f5;
}

.tool-tab.active {
  background: #e6f7ff;
  color: #1890ff;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.tool-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.tool-card:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.tool-card img {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  border-radius: 4px;
}

.tool-card h4 {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-type {
  display: inline-block;
  font-size: 12px;
  color: #666;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-card p {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tool-link {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 8px;
  background: #f5f5f5;
  color: #1890ff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 12px;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-link:hover {
  background: #e6f7ff;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLogo {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.resource-section,
.community-section,
.tool-layer {
  animation: fadeIn 0.5s ease-out;
}

.resource-spotlight {
  animation: fadeIn 0.6s ease-out;
}

.resource-category-item:nth-child(1) {
  animation: fadeIn 0.7s ease-out;
}

.resource-category-item:nth-child(2) {
  animation: fadeIn 0.8s ease-out;
}

.resource-category-item:nth-child(3) {
  animation: fadeIn 0.9s ease-out;
}

.resource-category-item:nth-child(4) {
  animation: fadeIn 1.0s ease-out;
}

.company-logo-item:nth-child(1) {
  animation-delay: 0.05s;
}

.company-logo-item:nth-child(2) {
  animation-delay: 0.1s;
}

.company-logo-item:nth-child(3) {
  animation-delay: 0.15s;
}

.company-logo-item:nth-child(4) {
  animation-delay: 0.2s;
}

.company-logo-item:nth-child(5) {
  animation-delay: 0.25s;
}

.company-logo-item:nth-child(6) {
  animation-delay: 0.3s;
}

.company-logo-item:nth-child(7) {
  animation-delay: 0.35s;
}

.company-logo-item:nth-child(8) {
  animation-delay: 0.4s;
}

.company-logo-item:nth-child(9) {
  animation-delay: 0.45s;
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .container {
    max-width: 100%;
    padding: 0 20px;
  }
}

@media (max-width: 992px) {
  .two-column-layout {
    flex-direction: column;
  }

  .left-column {
    width: 100%;
    margin-bottom: 20px;
  }

  .right-column {
    width: 100%;
  }

  .column-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .column-btn {
    flex: 1;
    min-width: 120px;
  }

  .tool-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }

  .resource-section,
  .community-section,
  .tool-layer {
    padding: 15px;
    margin-bottom: 20px;
  }

  .company-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 10px;
  }

  .resource-section,
  .community-section,
  .tool-layer {
    padding: 12px;
    margin-bottom: 15px;
  }

  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .company-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
}
</style>
